<!--
 * @Author: flechazo1 1932689495@qq.com
 * @Date: 2025-03-24 20:18:00
 * @LastEditors: flechazo1 1932689495@qq.com
 * @LastEditTime: 2025-04-06 10:49:36
 * @FilePath: \cms\src\components\SelectTime.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div>
        <!-- 选择上门时间 -->
        <el-dialog align-center v-model="showSelectTime"  width="500">
            <div class="w-full text-center text-xl mb-12">选择上门时间</div>
            <div class="block">
                <div class="my-6">
                    <span class="mx-8">请选择日期</span>
                    <el-date-picker
                        v-model="showDate"
                        type="date"
                        placeholder="选择时间"
                        format="YYYY/MM/DD"
                        value-format="YYYY-MM-DD"
                        :size="size"
                    />
                </div>
                <div class="flex">
                    <div class="w-34 mx-8 h-20">请选择档期</div>
                    <div class="h-20 grid gap-2">
                        <el-radio-group v-model="selectTimeResult">
                            <el-radio value="上午8:00~10:00" border>上午8:00~10:00</el-radio>
                            <el-radio value="上午10:30~12:30" border>上午10:30~12:30</el-radio>
                            <el-radio value="下午2:00~4:00" border>下午2:00~4:00</el-radio>
                            <el-radio value="下午4:30~6:30" border>下午4:30~6:30</el-radio>
                        </el-radio-group>
                    </div>
                </div>
            </div>
            <div class="w-full text-center mt-10">
                <el-button type="primary" size="large" style="width: 150px;" @click="ConfirmTime">确认</el-button>
            </div>
            
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import useSelectTime from '@/hooks/useSelectTime';
import { emitter } from '@/utils/emitter';
import { ref } from 'vue';

defineOptions({
  name: 'SelectTime'
})

let { showSelectTime,selectTime,showDate,selectTimeResult, ConfirmTime } = useSelectTime()
const size = ref<'default' | 'small' | 'large'>('default')
emitter.on('selectTime', (row:object) => {
    selectTime(row)
})
</script>

<style scoped>
.el-radio{
    margin-right: 10px;
}
</style>